package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/input"
	"github.com/templui/templui/internal/components/label"
	"github.com/templui/templui/internal/components/popover"
	"github.com/templui/templui/internal/utils"
)

templ PopoverDefault() {
	@popover.Trigger(popover.TriggerProps{
		For: "default-popover",
	}) {
		@button.Button(button.Props{
			Variant: button.VariantOutline,
		}) {
			Open Popover
		}
	}
	@popover.Content(popover.ContentProps{
		ID: "default-popover",
	}) {
		@PopoverContent()
	}
}

templ PopoverContent() {
	{{ var id = utils.RandomID() }}
	<div class="p-4 space-y-4">
		<div>
			<h3 class="text-lg font-semibold">Dimensions</h3>
			<p>Set the dimensions for the layer.</p>
		</div>
		<div class="flex flex-col gap-2 max-w-fit">
			<div class="flex items-center gap-2">
				@label.Label(label.Props{
					For:   "width" + id,
					Class: "w-24",
				}) {
					Width
				}
				@input.Input(input.Props{
					ID:          "width" + id,
					Placeholder: "Width",
					Value:       "100%",
					Class:       "flex-1",
				})
			</div>
			<div class="flex items-center gap-2">
				@label.Label(label.Props{
					For:   "height" + id,
					Class: "w-24",
				}) {
					Height
				}
				@input.Input(input.Props{
					ID:          "height" + id,
					Placeholder: "Height",
					Value:       "100%",
					Class:       "flex-1",
				})
			</div>
		</div>
	</div>
}
